<template>
    <el-card class="upgrade-card" shadow="never">
        <!-- 顶部标题栏 -->
        <div class="upgrade-title-bar">
            <span>纪念馆升级</span>
            <el-button type="warning" plain size="small" @click="goBack">返回上一页</el-button>
        </div>

        <!-- 纪念馆信息 -->
        <div class="memorial-info-section">
            <div class="info-row">
                <span class="info-label">纪念馆:</span>
                <span class="info-value">{{ muDetail.name }}</span>
            </div>
            <div class="info-row">
                <span class="info-label">纪念馆ID:</span>
                <span class="info-value">{{ muDetail.id }}</span>
            </div>
            <div class="info-row">
                <span class="info-label">类型:</span>
                <span class="info-value">{{ muDetail.type == 1 ? '普通馆' : muDetail.type == 2 ? '豪华馆' : '尊贵馆' }}</span>
            </div>
        </div>

        <!-- 选择升级类型 -->
        <div class="section-container upgrade-type-section">
            <span class="section-label">选择升级类型:</span>
            <el-select v-model="selectedUpgradeType" placeholder="---选择升级类型及年限---" style="width: 250px;" clearable
                @change="handleUpgradeTypeChange">
                <!-- 在这里添加实际的升级选项 -->
                <el-option v-for="item in upLevelList" :key="item.type" :label="item.trip" :value="item.type" />

                <!-- 更多选项... -->
            </el-select>
        </div>

        <!-- 选择支付方式 (复用之前的样式和逻辑) -->
        <div class="section-container">
            <span class="section-label">选择支付方式:</span>
            <div class="payment-options">
                <div v-for="method in paymentMethods" :key="method.id" class="payment-option"
                    :class="{ 'is-selected': selectedPaymentMethod === method.id }"
                    @click="selectedPaymentMethod = method.id">
                    <!-- 实际项目中应使用真实的图标路径 -->
                    <img :src="method.iconSrc || '/path/to/placeholder-icon.png'" :alt="method.name"
                        class="payment-icon" />
                    <span>{{ method.name }}</span>
                </div>
            </div>
        </div>

        <!-- 确认按钮 -->
        <div class="confirm-button-container">
            <el-button class="confirm-button" @click="confirmUpgrade">确认升级并支付</el-button>
        </div>

        <!-- 说明文字 -->
        <div class="explanation-notes">
            <strong>说明：</strong>
            <ol>
                <li v-for="(note, index) in explanationNotes" :key="index">
                    {{ note }}
                    <!-- 如果需要在特定说明后加链接，可在此处添加 -->
                    <el-link v-if="index === 1" type="primary" :underline="false"
                        @click="viewPermissionInfo">纪念馆权限说明</el-link>
                </li>
            </ol>
        </div>

    </el-card>
</template>

<script setup lang="ts">
import { ref, defineProps } from 'vue';
import wechatIcon from '@/assets/images/wechat-icon.png'
import useUserStore from '@/stores/modules/user';
import { apiMuDetail, my_muuUpgrade_config, my_muuUp_mu } from '@/api/graveyard'
import { ElMessageBox } from 'element-plus'
const route = useRoute()

const userStore = useUserStore()

const dialogVisible = ref(false)
const props = defineProps({
    memorialId: {
        type: Number || String,
        default: ''
    }
})
const upLevelList = ref([])
// --- 类型定义 ---
interface MemorialInfo {
    name: string;
    id: string;
    type: string;
}

interface PaymentMethod {
    id: number;
    name: string;
    iconSrc: string; // 图标路径
}

// --- 响应式状态 ---
const memorialInfo = ref<MemorialInfo>({
    name: '',
    id: '',
    type: '',
});

const selectedUpgradeType = ref<string>(''); // 当前选中的升级类型
const selectedPaymentMethod = ref<number>(2); // 默认选中支付宝

// 支付方式数据 (需要提供图标路径)
// 请将 'placeholder-icon-*.png' 替换为真实的图标文件路径
const paymentMethods = ref<PaymentMethod[]>([
    // { id: 'alipay', name: '支付宝', iconSrc: '/path/to/alipay-icon.png' }, // 替换为你的支付宝图标路径
    { id: 2, name: '微信支付', iconSrc: wechatIcon }, // 替换为你的微信支付图标路径
]);

// 说明文字
const explanationNotes = ref<string[]>([
    '确认升级后无法撤消，支付成功会自动升级。',
    '纪念馆等级及功能权限介绍请查看：', // 在模板中处理链接
]);

// --- 方法 ---
const emit = defineEmits<{
    (e: 'back-to-list', from: string): void;
    (e: 'to-path', from: string): void;
}>();
const goBack = () => {
    console.log('返回上一页...');
    // 实现返回逻辑, 比如使用 vue-router 的 router.back()
    // alert('返回上一页 (模拟)');
    emit('back-to-list', 'upLevel')
};
const goToPath = () => {
    emit('to-path', 'balance')
}

// 获取选中的升级套餐
const upLevelObj = ref()
const handleUpgradeTypeChange = async () => {
    upLevelObj.value = upLevelList.value.find((item: any) => item.type === selectedUpgradeType.value)
}
const confirmUpgrade = () => {
    if (!selectedUpgradeType.value) {
        alert('请选择升级类型！');
        return;
    }
    if (!selectedPaymentMethod.value) {
        alert('请选择支付方式！');
        return;
    }
    console.log(`确认升级类型: ${selectedUpgradeType.value}, 支付方式: ${selectedPaymentMethod.value}`);
    // alert('确认升级 (模拟)');
    // 实现调用升级和支付接口的逻辑


    // if (upLevelObj.value.price > userStore.userInfo.user_money) {
    //     console.log('余额不够')
    //     ElMessageBox.confirm('您确定要关闭此对话框吗？')
    //         .then(() => {
    //             console.log('点击了确定')
    //             goToPath()
    //         })
    //         .catch(() => {
    //             // catch error
    //             console.log('点击了取消')
    //         })
    //     return
    // }
    my_muuUp_mu({
        id: props.memorialId,
        type: selectedUpgradeType.value,
    }).then(res=>{
        console.log(res)
    }).catch(error=>{
        console.log(error)
    })
};

const viewPermissionInfo = () => {
    console.log('查看纪念馆权限说明');
    alert('查看权限说明 (模拟)');
    // 跳转到权限说明页面或显示弹窗
}
// 获取纪念馆详情
const muDetail = ref({})
const getApiMuDetail = async () => {
    const res = await apiMuDetail({ id: props.memorialId })
    console.log(res)
    muDetail.value = res
}

const getMy_muuUpgrade_config = async () => {
    let obj = await my_muuUpgrade_config()
    console.log(obj)
    upLevelList.value = obj
}
onMounted(() => {
    getMy_muuUpgrade_config()
    getApiMuDetail()
})
</script>

<style scoped>
.upgrade-card {
    border: 1px solid #e4e7ed;
    box-shadow: none;
    padding: 0;
    background-color: #fff;
}

.upgrade-title-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fdf6ec;
    /* 淡黄色背景 */
    color: #E6A23C;
    /* 橙色文字 */
    padding: 8px 15px;
    font-size: 14px;
    font-weight: bold;
    border-bottom: 1px solid #f5dab1;
    /* 稍深的边框 */
}

/* 纪念馆信息区域 */
.memorial-info-section {
    padding: 15px 15px 5px 15px;
    /* 减少下边距 */
    font-size: 14px;
    color: #606266;
    border-bottom: 1px solid #f2f2f2;
    /* 分隔线 */
    margin-bottom: 20px;
}

.info-row {
    margin-bottom: 10px;
    /* 行间距 */
    line-height: 1.6;
}

.info-label {
    display: inline-block;
    width: 80px;
    /* 标签宽度 */
    text-align: right;
    margin-right: 10px;
    color: #303133;
    /* 标签颜色稍深 */
}

.info-value {
    color: #606266;
}

/* 通用区域容器 */
.section-container {
    padding: 0 15px;
    margin-bottom: 25px;
    display: flex;
    /* 使用 flex 布局标签和控件 */
    align-items: center;
    /* 垂直居中对齐 */
}

/* 区域标签 */
.section-label {
    font-size: 14px;
    color: #303133;
    margin-right: 10px;
    /* 标签和控件间距 */
    width: 100px;
    /* 固定标签宽度 */
    text-align: right;
    flex-shrink: 0;
    /* 防止标签被压缩 */
}

/* 升级类型区域特殊调整 */
.upgrade-type-section {
    /* 可根据需要微调 */
}

:deep(.el-select .el-input__wrapper) {
    font-size: 13px;
}

/* 支付方式选项容器 */
.payment-options {
    display: flex;
    gap: 15px;
    /* 支付方式间距 */
    flex-grow: 1;
    /* 占据剩余空间 */
}

/* 支付方式选项卡片 (复用之前的样式) */
.payment-option {
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    background-color: #f9f9f9;
}

.payment-option:hover {
    border-color: #c0c4cc;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.payment-option.is-selected {
    border-color: #E6A23C;
    /* 选中时的橙色边框 */
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(230, 162, 60, 0.2);
}

.payment-icon {
    width: 24px;
    height: 24px;
    margin-right: 10px;
    vertical-align: middle;
}

.payment-option span {
    font-size: 14px;
    color: #303133;
}

/* 确认按钮容器和按钮样式 (复用之前的样式) */
.confirm-button-container {
    padding: 0 15px;
    margin-bottom: 25px;
    /* 使按钮内容根据标签宽度偏移 */
    padding-left: calc(15px + 100px + 10px);
    /* card padding + label width + label margin */
}

.confirm-button {
    width: 200px;
    height: 40px;
    font-size: 16px;
    background-color: #f39c12;
    /* 橙色背景 */
    border-color: #f39c12;
    color: #fff;
}

.confirm-button:hover {
    background-color: #e68e0b;
    border-color: #e68e0b;
}

/* 说明文字区域样式 (复用之前的样式) */
.explanation-notes {
    padding: 15px;
    background-color: #f5f7fa;
    /* 浅灰色背景 */
    border-top: 1px solid #e4e7ed;
    font-size: 12px;
    color: #606266;
    line-height: 1.8;
}

.explanation-notes strong {
    color: #303133;
    font-weight: 600;
}

.explanation-notes ol {
    padding-left: 20px;
    margin: 5px 0 0 0;
}

.explanation-notes li {
    margin-bottom: 3px;
}

.explanation-notes .el-link {
    font-size: 12px;
    vertical-align: baseline;
    margin-left: 5px;
    /* 与前面文字的间距 */
}
</style>